import React from "react";
import {LdhFieldSet} from "@biz/PageCompnents";
import {LdhFormItem,LdhFormItemTip, LdhInput, LdhObjListSelect} from "@biz/Components";
import BaseDetailPage from "@biz/BaseDetailPage";
import {createAction} from "../Action";
import Config from "../config";
import Store from "../Store";
import {PublicAction} from "@/base/BaseAction";

const prefix = "device-detail";
export default class DeviceDetail extends BaseDetailPage {

    constructor(props) {
        super(props);
        this.action = createAction();
        this.config = Config(this.action);
        this.store = new Store(props, this.config, this.action);
        this.className = prefix;
    }

    componentDidMount() {
        super.componentDidMount();
        PublicAction.allShopList(({voList = []}) => {
            this.setState({shopList: voList})
        });
    }

    renderMqttAddress() {
        let {loading} = this.state;
        return <LdhFieldSet title="MQTT配置" subTitle="（可根据此信息配置对应设备的订阅主题和发布主题）" loading={loading}>

            <LdhFormItem label="订阅主题" name="pubAddress" isDetail={true}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItemTip>对应APP上的订阅主题，即设备发送消息的地址， 服务端监听消息的地址， 需要确保唯一</LdhFormItemTip>

            <LdhFormItem label="发布主题" name="subAddress" isDetail={true}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItemTip>对应APP上的发布主题，即设备获取消息的地址， 服务端发送消息的地址， 需要确保唯一</LdhFormItemTip>
        </LdhFieldSet>
    }

    renderDetail(isDetail) {
        let {loading, shopList, detailStatus} = this.state;
        let isCreate = detailStatus == "create";
        return <LdhFieldSet title="基本信息" btn={!isDetail} loading={loading}>

            <LdhFormItem label="名称" name="name" required isDetail={isDetail}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItem label="门店" name="shopId" required isDetail={isDetail}>
                <LdhObjListSelect list={shopList}/>
            </LdhFormItem>
           {/* <LdhFormItem label="门店编号" name="shopNo" required isDetail={isDetail}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItemTip>该设备在门店中序号</LdhFormItemTip>*/}
            {isCreate || this.renderMqttAddress()}

        </LdhFieldSet>

    }
}